<script setup lang="ts">
import { ref, computed } from 'vue'
const rootPath = computed(() => {
  return import.meta.env.DEV ? '/' : './'
})
const isloading = ref(false)
const loaded = () => {
  isloading.value = true
}
</script>

<template>
  <main class="main-wrap" v-hl>
    <iframe
      class="frame"
      :class="{ show: isloading }"
      :src="`${rootPath}pages/cart/index.html`"
      @load="loaded"
    ></iframe>
  </main>
</template>

<style scoped lang="scss">
.main-wrap {
  @include size(100%, 100%);
  position: relative;
  overflow: hidden;
  background: #f1f9f9;
  .frame {
    @include size(100%, 100%);
    border: none;
    background: transparent;
    opacity: 0;
    &.show {
      animation: show 0.2s forwards;
    }
  }
}
@keyframes show {
  100% {
    opacity: 1;
  }
}
</style>
